<template>
        <el-row class="home" :gutter="20">
            <el-col :span="8" style="margin-top:20px">
                <el-card shadow="hover">
                    <div class="user">
                        <img :src="userImg"/>
                        <div class="userinfo">
                            <p class="name">Admin</p>
                            <p class="access">超级管理员</p>
                        </div>
                    </div>
                    <div class="login-info">
                        <p>上次登陆时间: <span>2021-7-19</span> </p>
                        <p>上次登录地点: <span>武汉</span> </p>
                    </div>
                </el-card>
                <el-card style="margin-top:20px;height:460px">
                    <el-table :data="tableData">
                        <el-table-column v-for="(v,i) in tableLabel" :key="i" :prop="i" :label="v"></el-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col style="margin-top:20px" :span="16" class="dingdan">
                <div class="num">
                    <el-card v-for="v in countData" :key="v.name" :body-style="{display:'flex',padding:0}">
                        <i class="icon" :class="`el-icon-${v.icon}`" :style="{background:v.color}"></i>
                        <div class="detail">
                            <p class="num">￥{{v.value}}</p>
                            <p class="txt">{{v.name}}</p>
                        </div>
                    </el-card>
                </div>
                <el-card style="height:280px;width:auto">
                    <!-- <div style="height:280px" ref="echarts"></div> -->
                    <e-charts :chartDate="echartData.order" style="height:280px"></e-charts>
                </el-card>
                <div class="graph">
                    <el-card style="height:260px">
                        <!-- <div style="height:240px" ref="userEcharts"></div> -->
                        <e-charts :chartDate="echartData.user" style="height:240px"></e-charts>
                    </el-card>
                    <el-card style="height:260px">
                        <!-- <div style="height:240px" ref="videoEcharts"></div> -->
                        <e-charts :chartDate="echartData.video" style="height:240px" :isAxischart="false"></e-charts>
                    </el-card>
                </div>
            </el-col>
        </el-row>
</template>

<script>
import ECharts from '@/components/ECharts.vue'
import {getData} from '../api/data'
    export default {
  components: { ECharts },
        data() {
            return {
                userImg: require('../../assets/logo.png'),
                tableData:[],
                tableLabel:{
                    name:'课程',
                    todayBuy:'今日购买',
                    monthBuy:'本月购买',
                    totalBuy:'总购买'
                },
                countData:[
                    {
                        name:'今日支付订单',
                        value:1234,
                        icon:'success',
                        color:'#2ec7c9',
                    },
                    {
                        name:'今日收藏订单',
                        value:210,
                        icon:'star-on',
                        color:'#ffb980',
                    },
                    {
                        name:'今日未支付订单',
                        value:1234,
                        icon:'s-goods',
                        color:'#sab1ef',
                    },
                    {
                        name:'本月支付订单',
                        value:1234,
                        icon:'success',
                        color:'#2ec7c9',
                    },
                    {
                        name:'本月收藏订单',
                        value:210,
                        icon:'star-on',
                        color:'#ffb980',
                    },
                    {
                        name:'本月未支付订单',
                        value:1234,
                        icon:'s-goods',
                        color:'#sab1ef',
                    },
                ],
                echartData:{
                    order:{
                        xData:[],
                        series:[]
                    },
                    user:{
                        xData:[],
                        series:[]
                    },
                    video:{
                        series:[]
                    }
                }
            }
        },
        mounted () {
            console.log(this.$router, 111111);
            getData().then(res=>{
                const {code,data}=res.data
                if(code==20000){
                    this.tableData=data.tableData
                    const order=data.orderData
                    const xData=order.date
                    const keyArray=Object.keys(order.data[0])
                    const series=[]
                    keyArray.forEach(key=>{
                        series.push({
                            name:key,
                            data:order.data.map(item=>item[key]),
                            type:'line'
                        })
                    })
                    /* const option={
                        xAxis:{
                            data:xData
                        },
                        yAxis:{},
                        legend:{
                            data:keyArray
                        },
                        series
                    } */
                    this.echartData.order.xData=xData
                    this.echartData.order.series=series
                   /* const E= echarts.init(this.$refs.echarts)
                   E.setOption(option) */
                   /* 用户图 */
                   /* const userOption={
                           legend:{
                               textStyle:{
                                   color:'#333',
                               },
                           },
                           grid:{
                               left:'20%',
                           },
                           tooltip:{
                               trigger:'axis'
                           },
                           xAxis:{
                               type:'category',
                               data:data.userData.map(item=>item.date),
                               axisLine:{
                                   lineStyle:{
                                       color:'#17b3a3'
                                   },
                               },
                               axisLable:{
                                   interval:0,
                                   color:'#333',
                               },
                           },
                           yAxis:[
                               {
                                   type:'value',
                                   axisLine:{
                                       lineStyle:{
                                           color:'#17b3a3'
                                       },
                                   },
                               },
                           ],
                           color:['#2ec7c9','#b6a2de'],
                           series:[
                               {
                                   name:'新增用户',
                                   data:data.userData.map(item=>item.new),
                                   type:'bar'
                               },
                               {
                                   name:'活跃用户',
                                   data:data.userData.map(item=>item.active),
                                   type:'bar'
                               }
                           ],
                   } */
                    this.echartData.user.xData=data.userData.map(item=>item.date)
                    this.echartData.user.series=[
                               {
                                   name:'新增用户',
                                   data:data.userData.map(item=>item.new),
                                   type:'bar'
                               },
                               {
                                   name:'活跃用户',
                                   data:data.userData.map(item=>item.active),
                                   type:'bar'
                               }
                           ]

                /* const U= echarts.init(this.$refs.userEcharts)
                U.setOption(userOption) */
                /* 饼状图 */
                /* const videoOption={
                    tooltip:{
                        trigger:'item',
                    },
                    color:[
                        '#0f78f4',
                        '#dd536b',
                        '#9462e5',
                        '#a6a6a6',
                        '#e1bb22',
                        '#39c362',
                        '#3ed1cf'
                    ],
                    series:[
                        {
                            data:data.videoData,
                            type:'pie'
                        }
                    ]
                }
                const V=echarts.init(this.$refs.videoEcharts)
                V.setOption(videoOption) */
                 this.echartData.video.series=[
                        {
                            data:data.videoData,
                            type:'pie'
                        }
                    ]
                }
            })
        },
    }
</script>

<style lang="scss">
canvas{
    width: 700px;
}
.graph{
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    .el-card{
        width: 47.5%;
    }
}
.home{
    .num{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-card{
            margin-bottom: 15px;
            width: 32%;
            .el-card__body{
                display: flex;
                align-items: center;
                p{
                    margin: 0;
                }
                i{
                    width: 60px;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                }
            }
        }
    }
.user{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    p{
        margin: 5px 0;
    }
    .name{
        font-weight: bold;
        font-size: 1.3rem;
    }
    .access{
        color: darkgray;
        font-weight: bold;
    }
    img{
        width: 100px;
        margin-right: 20px;
        border-radius: 50%;
    }
}
.login-info{
    p{
        color: dimgray;
        display: flex;
        span{
            color: #333;
            margin-left: 50px;
        }
    }
}
}
</style>